<!-- 护理等级列表页 -->
<template>
  <SearchForm :searchData="searchFormData" @handleSearch="search" @handleReset="searchFormReset" @handleClear="handleClear"></SearchForm>

  <TableList :listData="data" :total="total" :pagination="pagination" :dataLoading="dataLoading"
    @handleEdit="openEditDialog" @handleBulid="openAddDialog()" @handleClickDelete="handleDelete"
    @handleForbidden="handleToggleStatus" @query="query"></TableList>

  <DialogFrom :visible="dialogFormVisible" :data="dialogFormData" :title="dialogFormTitle" :planData="planData" @handleclose="dialogClose"
    @fetchData="fetchData" @handleAdd="openAddDialog" @handleEditForm="openEditDialog"></DialogFrom>

    <OperateDialog :visible="operateDialogVisible" :title="operateDialogTitle" :content="operateDialogContent"
    @close="operateDialogClose" @confirm="operateDialogConfirm"></OperateDialog>

</template>

<script setup lang="ts">
import TableList from '@/pages/serve/plan/grade/components/TableList.vue'
import SearchForm from '@/pages/serve/plan/grade/components/SearchForm.vue'
import DialogFrom from '@/pages/serve/plan/grade/components/DialogFrom.vue'
import OperateDialog from '@/pages/serve/plan/grade/components/OperateDialog.vue'
import { onMounted, ref } from 'vue';
import { getLevelDetails, getLevelList, levelDelete, levelStatus } from '@/api/serve';
import { MessagePlugin } from 'tdesign-vue-next';

// operate dialog 删除
const operateDialogVisible = ref(false)
const operateDialogTitle = ref('')
const operateDialogContent = ref('')
let row = null;
let rowOpType = null;//1删除 2禁用 3启用
const handleDelete = (r) => {
  operateDialogVisible.value = true;
  operateDialogTitle.value = "确认删除"
  operateDialogContent.value = "此操作将删除该护理项目，是否继续？"
  row = r;
  rowOpType = 1;
}
const operateDialogClose = () => {
  operateDialogVisible.value = false;
}


// 启用禁用
const handleToggleStatus = (r) => {
  operateDialogVisible.value = true;
  if (r.status === 1) {
    operateDialogTitle.value = "确认禁用";
    operateDialogContent.value = "此操作将禁用该护理项目，是否继续？";
    rowOpType = 2;
  } else {
    operateDialogTitle.value = "确认启用";
    operateDialogContent.value = "此操作将启用该护理项目，是否继续？";
    rowOpType = 3;
  }
  row = r;
}

const operateDialogConfirm = async () => {
  if (!row) {
    MessagePlugin.error("没有id无法操作");
    return;
  }
  // 调用后端接口
  let res = null;
   if (rowOpType === 1) {
    res = await levelDelete(row.id);
  }
  else if (rowOpType === 2) {
    res = await levelStatus({ id: row.id, status: 0 });
  } else if (rowOpType === 3) {
    res = await levelStatus({ id: row.id, status: 1 });
  } else {
    MessagePlugin.error('操作不支持');
    return;
  }
  if (res.code === 200) {
    // 成功
    MessagePlugin.success('操作成功');
    // 刷新页面
    query();
    // 关闭dialog
    operateDialogVisible.value = false;
  } else {
    MessagePlugin.error(res.msg);
  }
}

  // 列表相关
  const data = ref([]);
  const total = ref(0)
  const pagination = ref({
    pageNum: 1,
    pageSize: 10
  });
  const onPageSizeChange = () => {
    query();
  }
  const onCurrentChange = () => {
    query();
  }
  onMounted(() => {
    query();
  })
  //查询
  const query = async () => {
    const param = {
      pageNum: pagination.value.pageNum,
      pageSize: pagination.value.pageSize,
      name: searchFormData.value.name,
      status: searchFormData.value.status
    }
    const res = await getLevelList(param);
    if (res.code == 200) {
      data.value = res.data.records;
      total.value = res.data.total;
    }
  }

  const searchFormData = ref({ name: '', status: '' })
  const searchFormReset = () => {
    searchFormData.value = { name: '', status: '' }
    query();
  }
  const search = () => {
    query();
  }
  //新增修改dialog
  const dialogFormVisible = ref(false)
  const dialogFormTitle = ref('');
  const dialogFormData = ref({
    name: '',
    planId: '',
    price: '',
    status: '',
    description: '',
  })
  
const dialogClose = ()=>{
 dialogFormVisible.value = false
 dialogFormData.value = {
   name: '',
    planId: '',
    price: '',
    status: '',
    description: '',
  }
}
  const openAddDialog = () => {
    dialogFormVisible.value = true
    dialogFormTitle.value = '新增'
  }
  const openEditDialog = async (row)=>{
// console.log(row)
// 回显查询
const res = await getLevelDetails(row.id);
if(res.code == 200){
  dialogFormVisible.value = true
  dialogFormTitle.value = '修改'
  dialogFormData.value = res.data;
}else{
   MessagePlugin.error(res.msg);
}
}

</script>